<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<link rel="stylesheet" href="./../demo/hiton.css">
</head>
<body>
<div class="hiton"><p>
<p id="h__1" class="hiton-counting-mode-heading">1. MD 基本功能</p>
</p><p>
<p id="h__1_1" class="hiton-counting-mode-heading">1.1. 斜体、加粗、下划线</p>
</p><p>
只支持 <code class="hiton-span-margin hiton-span-bold hiton-inline-code">**</code><sup id="rs__1"><a href="#rv__1">注1</a></sup> 的加粗，<code class="hiton-span-margin hiton-span-bold hiton-inline-code">_</code> 的斜体设置，<br />不支持 <code class="hiton-span-margin hiton-span-bold hiton-inline-code">*</code> 的斜体和 <code class="hiton-span-margin hiton-span-bold hiton-inline-code">__</code> 的加粗。
</p><p>
<p id="h__1_2" class="hiton-counting-mode-heading">1.2. 外部链接</p>
</p><p>
<p id="h__1_2_1" class="hiton-counting-mode-heading">1.2.1. 普通链接</p>
</p><p>
<a class="hiton-link"  href="https://www.baidu.com">https://www.baidu.com</a><br /><a class="hiton-link"  href="https://www.baidu.com"><del class="hiton-span-margin">百度</del></a><br /><a class="hiton-link" title= "百度一下，你就知道" href="https://www.baidu.com">https://www.baidu.com</a><br /><a class="hiton-link" title= "百度一下，你就知道" href="https://www.baidu.com">百度</a>
</p><p>
<p id="h__1_2_2" class="hiton-counting-mode-heading">1.2.2. 邮件</p>
</p><p>
<a class="hiton-link" href="mailto:hzwaygc@gmail.com">hzwaygc@gmail.com</a>
</p><p>
<p id="h__1_3" class="hiton-counting-mode-heading">1.3. 图片</p>
</p><p>
<div id="p__1" class="hiton-image hiton-align__center"><img src="https://static.waygc.net/imgs/qrcode/wechat.jpg" /></div>
</p><p>
<p id="h__1_4" class="hiton-counting-mode-heading">1.4. 行内代码</p>
</p><p>
这里是<mark class="hiton-span-margin">一行</mark>文字中的代码<code class="hiton-span-margin hiton-span-bold hiton-inline-code">var a = "10";</code>。
</p><p>
<p id="h__1_5" class="hiton-counting-mode-heading">1.5. 列表</p>
</p><p><ol type="1"><li>aaa<ol type="1"><li>aaaa
</li><li>bbbb

</li></ol></li><li>bbb
</li><li>ccc

</li></ol></p><p><ol type="1"><li>!{微信公众号}

</li></ol></p><p><ol type="1"><li>aaa
</li><li>bbb
</li><li>ccc
</li><li>sdfad
</li><li>asdfadsf

</li></ol></p><p><div class="hiton-list"><ul><li><a class="hiton-link"  href="https://www.baidu.com">https://www.baidu.com</a>
</li><li><a class="hiton-link"  href="https://www.baidu.com">百度</a>
</li><li><a class="hiton-link" title= "百度一下，你就知道" href="https://www.baidu.com">https://www.baidu.com</a>
</li><li><a class="hiton-link" title= "百度一下，你就知道" href="https://www.baidu.com">百度</a>

</li></ul></div></p><p><ol type="1"><li>1qaz<ol type="a"><li>123
</li><li>cde

</li></ol></li><li>2wsx

</li></ol></p><p><div class="hiton-list"><ul><li>aaa<ol type="1"><li>bbbb
</li><li>ccc

</li></ol></li><li>dddd

</li></ul></div></p><p><div class="hiton-list"><ul><li>dd<div class="hiton-list"><ul><li>aaaa
</li><li>bbbb

</li></ul></div></li><li>ee
</li><li>fff

</li></ul></div></p><p><ol type="1"><li>ABABA
</li><li>CCDD<div class="hiton-list"><ul><li>CCC
</li><li>DDD

</li></ul></div></li><li>EFGH

</li></ol></p><p>
<p id="h__1_6" class="hiton-counting-mode-heading">1.6. 表格</p>
</p><p>
内容就和<a class="hiton-span-bold hiton-span-margin hiton-table-calling" href="#t__1">表：第一张表格</a>里所示的那样。
</p><p>
<table class="hiton-table"><thead><tr><th>字段1</th><th>字段2</th><th>字段3</th></tr></thead><tbody><tr><td>内容11</td><td>内容12</td><td>内容13<sup id="rs__2"><a href="#rv__2">注2</a></sup></td></tr><tr><td><span class="hiton-span-margin hiton-ruby"><ruby>汉字<rp>（</rp><rt>hanzi</rt><rp>）</rp></ruby></span></td><td><strong class="hiton-span-margin">内容22</strong></td><td><span class="hiton-span-margin hiton-color" style="color:#0000FF">内容23</span></td></tr><tr><td><ins class="hiton-span-margin">内容31</ins></td><td>内容32</td><td><del class="hiton-span-margin">内容33</del></td></tr></tbody></table></p><p>
<div id="t__1" class="hiton-table-define">表：第一张表格</div>
</p><p>
<table class="hiton-table"><thead><tr><th>字段一</th><th>字段二</th><th>字段三</th></tr></thead><tbody><tr><td>1-1</td><td>1-2</td><td>[1-3]</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></tbody></table></p><p>
<div id="t__2" class="hiton-table-define">表：第二张表格</div>
</p><p>
<p id="h__1_7" class="hiton-counting-mode-heading">1.7. 引用</p>
</p><p><div class="hiton-quote"><fieldset><legend>引用标题</legend>这里是引用外部的文字<a class="hiton-span-bold hiton-span-margin hiton-table-calling" href="#t__2">表：第二张表格</a>
<div class="hiton-quote"><fieldset><legend>引用</legend>还可以进行内部再次引用
</fieldset></div>
引用结束
</fieldset></div></p><p>
<p id="h__2" class="hiton-counting-mode-heading">2. HITON 外加功能</p>
</p><p>
<p id="h__2_1" class="hiton-counting-mode-heading">2.1. 颜色、字号、注音</p>
</p><p>
<p id="h__2_1_1" class="hiton-counting-mode-heading">2.1.1. 颜色</p>
</p><p>
<span class="hiton-span-margin hiton-color" style="color:#FF0000"><ins class="hiton-span-margin">血字的研究</ins></span>
</p><p>
<p id="h__2_1_2" class="hiton-counting-mode-heading">2.1.2. 字号</p>
</p><p>
<span class="hiton-span-margin hiton-font" style="font-size:48px;"><em class="hiton-span-margin">48px</em> 大小的文字</span><br /><span class="hiton-span-margin hiton-font" style="font-size:20px;">ps不是合法的单位，所以用<strong class="hiton-span-margin">px</strong>的替代</span>
</p><p>
<p id="h__2_1_3" class="hiton-counting-mode-heading">2.1.3. 注音</p>
</p><p>
<span class="hiton-span-margin hiton-ruby"><ruby>一<rp>（</rp><rt>yi</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>个<rp>（</rp><rt>ge</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>一<rp>（</rp><rt>yi</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>个<rp>（</rp><rt>ge</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>字<rp>（</rp><rt>zi</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>地<rp>（</rp><rt>de</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>注<rp>（</rp><rt>zhu</rt><rp>）</rp></ruby></span><span class="hiton-span-margin hiton-ruby"><ruby>音<rp>（</rp><rt>yin</rt><rp>）</rp></ruby></span>
</p><p>
<p id="h__2_1_4" class="hiton-counting-mode-heading">2.1.4. 上下标</p>
</p><p>
<mark class="hiton-span-margin">CO<sub>2</sub></mark><br />C<sub>6</sub>H<sub>12</sub>O<sub>6</sub><br />y = x<sup>2</sup>
</p><p>
<p id="h__2_1_5" class="hiton-counting-mode-heading">2.1.5. 文字对齐</p>
</p><p><div class="hiton-align__center">居中对齐</div></p><p><div class="hiton-align__left">左对齐</div></p><p><div class="hiton-align__right">右对齐</div></p><p>
<p id="h__2_1_6" class="hiton-counting-mode-heading">2.1.6. 预定义段落</p>
</p><p><pre class="hiton-pre-struct">这里可以写	预定义结构
不用考虑 <mark class="hiton-span-margin">md</mark> 的格式
</pre></p><p>
<p id="h__2_2" class="hiton-counting-mode-heading">2.2. 外部参考注释</p>
</p><p><div class="hiton-ref-value" id="rv__1"><a href="#rs__1">注1</a>：这是一条注释<a href="#rs__1">↰</a></div></p><p><div class="hiton-ref-value" id="rv__2"><a href="#rs__2">注2</a>：这是第二条注释<a href="#rs__2">↰</a></div></p><p>

<p id="h__2_3" class="hiton-counting-mode-heading">2.3. 9. 代码</p>
</p><p>
代码依赖插件实现。
</p><p><pre class="hiton-codes"><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>;
<span class="hljs-keyword">var</span> b = <span class="hljs-number">10</span>;
<span class="hljs-keyword">var</span> c = a + b;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(c);
</pre></p><p><div class="hiton-quote"><fieldset><legend>引用</legend>[1, << , 最后 - 4, 最后 - 3, 最后 - 2, 最后 - 1, 最后 ]
</fieldset></div></p></div>
</body>
</html>